<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
   	<link rel="stylesheet" href="CSS/index.css">
	<script>
		function btnshuju()
		{
			var xhr=new XMLHttpRequest();
			var url= "";
			xhr.open("post",url,true);
			var data={
					type:1,
					limit: "all",
				}
			
			xhr.onreadystatechange=function()
			{
				if (xhr.readyState === 4 && xhr.status === 200) {
					console.log(xhr.responseText);
					var z=xhr.responseText;
					var myArr=JSON.parse(z);
					for(var i=0;i<myArr.data.length;i++)
					{
						
						if(myArr.data[i].key==301)
						{
							document.getElementById("tem").value=myArr.data[i].val;
						}
						else if(myArr.data[i].key==302)
						{
							document.getElementById("humidity").value=myArr.data[i].val;
						}
						else if(myArr.data[i].key==101)
						{
							document.getElementById("angle").value=myArr.data[i].val;
						}
						else if(myArr.data[i].key==102)  
						{
							document.getElementById("subsidence").value=myArr.data[i].val;
						}
						else if(myArr.data[i].key== 103)
						{
							document.getElementById("CO2-concen").value=myArr.data[i].val;
						} 
						else if(myArr.data[i].key==104)
						{
							document.getElementById("wind").value=myArr.data[i].val;
							console.log("wind", myArr.data[i].val);
						} 

						else if(myArr.data[i].key==303)
							
						{
							if(myArr.data[i].val==1)
							{
								document.getElementById("dON").checked=true;
							}
							else{
								document.getElementById("dOFF").checked=true;
							}
						}
						else if(myArr.data[i].key==105)
						{
							if(myArr.data[i].val==1)
							{
								document.getElementById("fON").checked=true;
							}
							else{
								document.getElementById("fOFF").checked=true;
							}
						}
					
						else if(myArr.data[i].key==106)
						{
							if(myArr.data[i].val==1)
							{
								document.getElementById("sON").checked=true;
							}
							else{
								document.getElementById("sOFF").checked=true;
							}
						}
					}
				}	
			}
			xhr.send(JSON.stringify(data)); 
		}
		function fun1(obj)
		{
			var xhr = new XMLHttpRequest();
			var url = "";
			xhr.open("post", url,true);
			if(obj=='fON')
			{
				var data={
					type:2,
					data:{
						key:105,
						val:"1"
					}
				}
			}
			else if('fOFF')
			{
				var data={
					type:2,
					data:{
						key:105,
						val:"0"
					}
				}
			}
			xhr.send(JSON.stringify(data)); 
			
		}
		function fun2(obj)
		{
			var xhr = new XMLHttpRequest();
			var url = "";
			xhr.open("post", url,true);
			if(obj=='sON')
			{
				var data={
					type:2,
					data:{
						key:106,
						val:"1"
					}
				}
			}
			else if('sOFF')
			{
				var data={
					type:2,
					data:{
						key:106,
						val:"0"
					}
				}
			}
			xhr.send(JSON.stringify(data)); 
		}
		function fun(obj)
		{
			var xhr = new XMLHttpRequest();
			var url = "";
			xhr.open("post", url,true);
			if(obj=='dON')
			{
				var data={
					type:2,
					data:{
						key:303,
						val:"1"
					}
				}
			}
			else if('dOFF')
			{
				var data={
					type:2,
					data:{
						key:303,
						val:"0"
					}
				}
			}
			xhr.send(JSON.stringify(data)); 
		}
	</script>
</head>
<body>
    <ul class="nav">
        <li class="first">数据检测</li>
        <li class="second">视频监控</li>
    </ul>
    <!-- 使用display属性 -->
    <div id="page01" class=" page" style="display:block"> 
        <!-- <h1>数据检测</h1> -->
		<!-- 温度 -->
		<div class="shuju" id="temperature1">
			<img src="img/temperature.png" />
			<input type="text" name="temperature" value="tem" id="tem">
		</div>
		<!-- 湿度 -->
		<div class="shuju" id="humidity1">
			<img src="img/humidity.png" />
			<input type="text" id="humidity" value="">
		</div>
		<!-- 角度 -->
		<div class="shuju" id="angle1"  >
			<img src="img/angle.png" />
			<input type="text" id="angle" value="">
		</div>
		<!-- 沉降 -->
		<div class="shuju" id="subsidence1" >
			<img src="img/subsidence.png" />
			<input type="text" id="subsidence" value="" >
		</div>
		<!-- 二氧化碳 -->
		<div class="shuju" id="CO2-concen1">
			<img src="img/CO2-concen.png" />
			<input type="text" id="CO2-concen" value="" >
		</div>
		<!-- 压力 -->
		<div class="shuju" id="wind1">
			<img src="img/wind.png" />
			<input type="text" id="wind" value="">
		</div>
		
		<!-- 灯 -->
		<div class="shuju" id="light1" >
			<img src="img/light.png" />
			<div class="kaiguan">
				<p class="kon">ON:</p>
				<input type="radio" name="led" id="dON" onclick="fun(id)" style="width: 30px; height: 30px; left:35px ">
				<p class="koff">OFF:</p>
				<input type="radio" name="led" id="dOFF" onclick="fun(id)"style="width: 30px; height: 30px;left:110px">
			</div>
		</div>
		<!-- 蜂鸣器(beep) -->
		<div class="shuju" id="beep1">
			<img src="img/beep.png" />
	<div class="kaiguan" >
		<p class="kon">ON:</p>
		<input type="radio" name="fm" id="fON" onclick="fun1(id)" style="width: 30px; height: 30px; left:35px ">
		<p class="koff">OFF:</p>
		<input type="radio" name="fm" id="fOFF" onclick="fun1(id)"style="width: 30px; height: 30px;left:110px">
	</div>
			
		</div>
		<!-- 喷淋器 (spray)-->
		<div class="shuju" id="spray1">
			<img src="img/spray.png" />
			 
			 <div class="kaiguan" >
			 	<p class="kon">ON:</p>
			 	<input type="radio" name="sp" id="sON" onclick="fun2(id)" style="width: 30px; height: 30px; left:35px ">
			 	<p class="koff">OFF:</p>
			 	<input type="radio" name="sp" id="sOFF" onclick="fun2(id)"style="width: 30px; height: 30px;left:110px">
			 </div>
		</div>
		
		<button  onclick="btnshuju()"> 刷新</button>
    </div>
    <div id="page02" class=" page" style="display:none">
        <h1>视频监控</h1>
		<div class="videoBox">
			<img src="http://192.168.50.245:8080/?action=stream" />
		</div>
    </div>

	<!-- <script src="JS/index.js">	
	</script> -->
    <script>
        //使用排他思想
        //获取导航栏按钮
        let lis = document.querySelectorAll('li')
        //获取三个要切换的盒子
        let page01 = document.getElementById('page01')
        let page02 = document.getElementById('page02')
        // let page03 = document.getElementById('page03')
        //点击导航栏，改变Iframe的src属性，实现页面切换
        for (let i = 0; i < lis.length; i++) {
            //绑定点击事件
            lis[i].onclick = function(event){
                if(event.target.classList.contains('first')){
                    changPage()
                    page01.style.display = 'block'
                }else if(event.target.classList.contains('second')){
                    changPage()
                    page02.style.display = 'block'
                }else{
                    changPage()
                    page03.style.display = 'block'
                }
            }
        }
        //封装一个排他思想的函数                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         
        function changPage(){
            //获取所有page
            document.querySelectorAll('.page').forEach(el=>{
                el.style.display = 'none'
            })
        }
    </script>
</body>
</html>